<!--登录页-->
<template>
  <div style="height: 100vh;
           background-image: url('/imgs/login/panda.jfif'); /* 使用图片作为背景 */
           background-size: cover; /* 让图片覆盖整个元素，可能需要根据需要调整 */
           background-position: center; /* 图片居中显示 */
           overflow: hidden;
           position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */">
  <el-container style="padding:30px;margin-left: 100px;">
    <el-header style="position: absolute; /* 绝对定位 */
                   top: 20px; /* 距离顶部 */
                   right: 20px; /* 距离右边 */
                   display: flex; /* 使用Flex布局来简化内部元素的排列 */
                   align-items: center; /* 垂直居中 */
                   justify-content: flex-end;
                   margin-top: 20px;
                   margin-right: 30px;/* 水平居右 */">

    </el-header>
    <el-main>
        <el-row :gutter="40">
          <el-col :span="1">
            <img src="" style="width:100%;margin-top:60px;">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top:80px;" class="transparent-card">
              <h3 style="text-align:center;color: #333333">用户登录</h3>
              <el-form label-position="top">
                <el-form-item label="" style="color: #333333;">用户名
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="" style="color: #333333">密码
                  <el-input placeholder="请输入密码" v-model="user.password" type="password" @keydown.enter="login()"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:100%;margin-bottom: 10px;border-color: #42b983;background-color: #42b983" @click="login()">登录</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:100%;border-color: #42b983;background-color: #42b983" @click="dialogVisible = true">注册</el-button>
                </el-form-item>
              </el-form>
              <div style="text-align:center;font-size:14px;padding:10px 0;color: #333333;">
                (体验账号:admin 密码:admin)
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    <div style="display: flex; align-items: center;margin-top: 170px;margin-left: 1100px;">
      <img src="/imgs/login/Y.png" style="height: 50px; margin-right: 20px;">
      <img src="/imgs/login/verticalLine.png" style="height: 50px; margin-right: 20px;">
      <span style="color: #42b983; font-size: 30px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0,20, 20);">游友悠旅</span>
    </div>
    </el-container>
  </div>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="60%" center>
    <el-form label-width="100px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名" style="color: darkcyan" class="text1">
            <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" style="color: #333333" class="text1">
            <el-input type="password" placeholder="请输入密码" v-model="registerForm.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="registerForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="registerForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="年龄">
            <el-input-number v-model="registerForm.age" controls-position="right" :min="18" :max="100"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <el-radio-group v-model="registerForm.gender">
              <el-radio :label="'男'">男</el-radio>
              <el-radio :label="'女'">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=昵称>
            <el-input placeholder="请输入昵称" v-model="registerForm.nickname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" style="border-color: #42b983;background-color: #42b983" @click="registerUser()">注册</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import {ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";
import qs from "qs";

const user = ref({username: '', password: ''});

const dialogVisible = ref(false);
const dialogTitle = ref('注册用户');
const registerForm = ref({
  username: '',
  password: '',
  email: '',
  phone: '',
  age: 18,
  gender: '男',
  nickname:''
});

const registerUser = () => {
  let data = qs.stringify(registerForm.value);
  console.log(data);
  axios.post(BASE_URL + '/yyt/user/save', data)
      .then(response => {
        if (response.data.code === 2000) {
          ElMessage.success("注册成功");
          dialogVisible.value = false;
          registerForm.value = {};
        } else {
          ElMessage.error("注册失败，请检查信息是否正确");
        }
      })
};

//登录方法
const login = () => {
  let data = qs.stringify(user.value);
  console.log(data);
  //Security默认代理接口为login
  axios.post(BASE_URL+'/login',data).then(response => {
    if (response.data.code == 2000) {
      ElMessage.success('登录成功!');

      localStorage.user = JSON.stringify(response.data.data);
      router.push('/scene');
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>
.transparent-card {
  background-color: rgba(178, 190, 181, 0.5); /* 莫兰迪绿半透明 */
  border-color: rgba(255, 255, 255, 0.2);
  color: #333;
}

.transparent-card .el-form-item__label,
.transparent-card .el-input__placeholder,
.transparent-card .el-button {
  color: #333 !important; /* 使用!important来确保这些规则具有更高的优先级，尽管通常不推荐这样做，除非确实需要 */
}
text1 {
      color: #000; /* 设置label的字体颜色为黑色 */
}

</style>